<template>
    <div>
        <el-button style="float: left;"  type="primary"  @click="addFormVisible=true">添加</el-button>
        <el-button style="float: left;" type="primary" @click="exportdoctors">导出医生列表</el-button>
        <el-form>
            <el-button style="float: right" icon="el-icon-lx-search" type="primary"  @click="selectDoctor"></el-button>
            <el-input type="text" v-model="doctorQuery.name" placeholder="填写姓名" style="float: right;width: 200px"></el-input>
            <el-form-item  style="float: right"  >
                <el-select v-model="doctorQuery.level" placeholder="选择水平" style="width: 150px;">
                    <el-option label="专家" value="1" > </el-option>
                    <el-option label="普通" value="2" ></el-option>
                    <el-option label="水平不限" value="" ></el-option>
                </el-select>
            </el-form-item>

        </el-form>
        <el-table
                :data="data.slice((currentPage-1)*pagesize,currentPage*pagesize)">

            <el-table-column
                    label="编号"
                    prop="id"
                    align="center"
                    width="200"
                    sortable
            >
            </el-table-column>
            <el-table-column
                    label="姓名"
                    prop="name"
                    align="center">
            </el-table-column>
            <el-table-column
                    label="简介"
                    prop="info"
                    align="center" width="200">
            </el-table-column>

            <el-table-column
                    label="性别"
                    align="center">
                <template #default="scope">
                    <p v-if="scope.row.sex=='1'">男</p>
                    <p v-if="scope.row.sex=='2'">女</p>
                </template>
            </el-table-column>

            <el-table-column
                    label="身份证号"
                    prop="idCard"
                    align="center">
            </el-table-column>
            <el-table-column
                    label="电话"
                    prop="phone"
                    align="center"
            >
            </el-table-column>
            <el-table-column
                    label="科室"
                    align="center">
                <template #default="scope">
                    <p  v-for="depart in secondList" >
                        <span v-if="scope.row.departmentId==depart.id">{{depart.name}}</span>
                    </p>


                </template>
            </el-table-column>
            <el-table-column
                    label="资历"
                    prop="career"
                    align="center"
                    width="200"
            >

            </el-table-column>

            <el-table-column
                    label="水平"
                    align="center">
                <template #default="scope">
                    <p v-if="scope.row.level=='1'">专家</p>
                    <p v-if="scope.row.level=='2'">普通</p>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="250" align="center">

                <template #default="scope">
                    <el-button type="text" icon="el-icon-edit" @click="handleEdit(scope.$index, scope.row)">编辑
                    </el-button>
                    <el-button type="text" icon="el-icon-delete" style="color: red"
                               @click="handledelete(scope.$index, scope.row)">删除</el-button>
                    <el-button type="text" icon="el-icon-refresh" style="color: #00ff19"
                               @click="handlerefresh(scope.$index, scope.row)">重置密码</el-button>
                </template>
            </el-table-column>

        </el-table>
        <center>
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[5, 10, 20, 40]"
                :page-size="pagesize"
                layout="total, sizes, prev, pager, next, jumper"
            :total="data.length"
        >
        </el-pagination>
        </center>

        <el-dialog   v-model="addFormVisible" width="420px" >
            <el-form ref="adddoctorform" :model="adddoctor" :rules="rules">
                <h3 style="text-align: center">添加医生</h3>
<!--                <el-form-item label="编号" >-->
<!--                    <el-input v-model="adddoctor.id" autocomplete="off" style="width: 300px;float: right"></el-input>-->
<!--                </el-form-item>-->
                <el-form-item label="姓名" prop="name">
                    <el-input v-model="adddoctor.name" autocomplete="off" style="width: 300px;float: right"></el-input>
                </el-form-item>
                <el-form-item label="简介" prop="info">
                    <el-input v-model="adddoctor.info" autocomplete="off" style="width: 300px;float: right" ></el-input>
                </el-form-item>
                <el-form-item label="性别" prop="sex">
                    <el-radio  v-model="adddoctor.sex" style="margin-left: 50px" label="1">男</el-radio>
                    <el-radio v-model="adddoctor.sex" label="2">女</el-radio>
                </el-form-item>
                <el-form-item label="身份证号" prop="idCard">
                    <el-input v-model="adddoctor.idCard" autocomplete="off" style="width: 300px;float: right"></el-input>
                </el-form-item>
                <el-form-item label="电话" prop="phone">
                    <el-input v-model="adddoctor.phone" autocomplete="off" style="width: 300px;float: right" ></el-input>
                </el-form-item>
                <el-form-item label="资历" prop="career">
                    <el-input v-model="adddoctor.career" autocomplete="off" style="width: 300px;float: right" ></el-input>
                </el-form-item>
                <el-form-item label="水平" prop="level">
                    <el-radio  v-model="adddoctor.level" style="margin-left: 50px" label="1">专家</el-radio>
                    <el-radio v-model="adddoctor.level" label="2">普通</el-radio>
                </el-form-item>
                <el-form-item label="科室" >
                    <el-select v-model="adddoctor.departmentId" placeholder="请选择科室" style="width: 300px;float: right">
                        <el-option v-for="item in secondList" :label="item.name" :key="item.id" :value="item.id" ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input type="password" v-model="adddoctor.password" autocomplete="off" style="width: 300px;float: right" ></el-input>
                </el-form-item>
                <el-form-item label="确认密码" prop="passwords">
                    <el-input type="password" v-model="adddoctor.passwords" autocomplete="off" style="width: 300px;float: right" ></el-input>
                </el-form-item>

            </el-form>
            <div slot="footer"  class="dialog-footer">
                <center><el-button @click="addFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="adddoctorform('adddoctorform')">确 定</el-button></center>
            </div>
        </el-dialog>
        <el-dialog   v-model="deleteFormVisible" width="420px" >
            <center><h3>确认删除{{doctor.name}}?<br><br></h3></center>
            <div slot="footer"  class="dialog-footer">
                <center><el-button @click="deleteFormVisible= false">取 消</el-button>
                    <el-button type="primary" @click="Deletedoctor">确 定</el-button></center>
            </div>
        </el-dialog>
        <el-dialog   v-model="refreshFormVisible" width="420px" >
            <center><h3>确认重置{{doctor.name}}的密码?<br><br></h3></center>
            <div slot="footer"  class="dialog-footer">
                <center><el-button @click="refreshFormVisible= false">取 消</el-button>
                    <el-button type="primary" @click="OnSubmitrefresh">确 定</el-button></center>
            </div>
        </el-dialog>
        <el-dialog   v-model="dialogFormVisible" width="420px" >
            <el-form ref="dialogForm" :model="doctor" :rules="rules">
<!--                <el-form-item label="编号"  >-->
<!--                    <el-input v-model="doctor.id" autocomplete="off" style="width: 300px;float: right"></el-input>-->
<!--                </el-form-item>-->
                <el-form-item label="姓名" prop="name">
                    <el-input v-model="doctor.name" autocomplete="off" style="width: 300px;float: right"></el-input>
                </el-form-item>
                <el-form-item label="简介" prop="info">
                    <el-input v-model="doctor.info" autocomplete="off" style="width: 300px;float: right"></el-input>
                </el-form-item>
                <el-form-item label="性别" prop="level">
                    <el-radio-group v-model="doctor.sex">
                        <el-radio :label="1" style="margin-left: 50px">男</el-radio>
                        <el-radio :label="2">女</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="身份证号" prop="idCard">
                    <el-input v-model="doctor.idCard" autocomplete="off" style="width: 300px;float: right"></el-input>
                </el-form-item>
                <el-form-item label="电话" prop="phone">
                    <el-input v-model="doctor.phone" autocomplete="off" style="width: 300px;float: right" ></el-input>
                </el-form-item>
                <el-form-item label="水平" prop="level">
                    <el-radio-group v-model="doctor.level">
                        <el-radio :label="1" style="margin-left: 50px">专家</el-radio>
                        <el-radio :label="2">普通</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="资历" prop="career">
                    <el-input v-model="doctor.career" autocomplete="off" style="width: 300px;float: right" ></el-input>
                </el-form-item>
                <el-form-item label="科室" >
                    <el-select v-model="doctor.departmentId" placeholder="请选择科室" style="width: 300px;float: right">
                        <el-option v-for="item in secondList" :label="item.name" :key="item.id" :value="item.id" ></el-option>
                    </el-select>
                </el-form-item>

            </el-form>
            <div slot="footer"  class="dialog-footer">
                <center><el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="edit('dialogForm')">确 定</el-button></center>
            </div>
        </el-dialog>
    </div>
</template>

<script>

    import axios from "axios";
    import {ElMessage} from "element-plus";

    export default {
        name: "DoctorList",
        data() {
            var validatePass = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入密码'));
                } else {
                    // if (this.user.passwords!== '') {
                    //     this.$refs.user.validateField('passwords');
                    // }
                    callback();
                }
            };
            var validatePass2 = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请再次输入密码'));
                } else if (value !== this.adddoctor.password) {
                    callback(new Error('两次输入密码不一致!'));
                } else {
                    callback();
                }
            };
            return {
                data: {
                    avatar:'',
                    deleted:0,
                    gmtCreate:'',
                    gmtUpdate:'',
                    id: '',
                    name: '',
                    info:'',
                    career:'',
                    level:'',
                    sex:'',
                    idCard:'',
                    password:'',
                    phone:'',
                    departmentId: '',
                },

                secondList:{
                    id:'',
                    name:'',
                },
                secondList:[],
                data:[],
                currentPage:1, //初始页
                pagesize:8,    //    每页的数据
                dialogFormVisible: false,
                addFormVisible: false,
                deleteFormVisible:false,
                refreshFormVisible:false,
                doctorQuery: {
                    level: '',
                    name: "",
                },
                doctor: {
                    id: '',
                    name: '',
                    info:'',
                    career:'',
                    level:'',
                    sex:'',
                    idCard:'',
                    phone:'',
                    departmentId: '',
                    second_id:'',
                    password:''
                },
                adddoctor: {
                    id: '',
                    name: '',
                    info:'',
                    career:'',
                    level:"",
                    sex:'',
                    password:'',
                    passwords:'',
                    idCard:'',
                    phone:'',
                    departmentId: '',
                    second_id:''
                },
                rules:{
                    name:[
                        {required:true,message:"姓名不可为空",trigger:'blur'}
                    ],
                    career:[
                        {required:true,message:"资历不可为空",trigger:'blur'}
                    ],
                    level:[
                        {required:true,message:"水平不可为空",trigger:'blur'}
                    ],
                    info:[
                        {required:true,message:"简介不可为空",trigger:'blur'}
                    ],
                    sex:[
                        {required:true,message:"性别不可为空",trigger:'blur'}
                    ],
                    age:[
                        {required:true,message:"年龄不可为空",trigger:'blur'}
                    ],
                    idCard: [
                        {required:true,message:"身份证不可为空",trigger:'blur'},
                        { min: 18, max: 18, message: '请正确输入身份证号', trigger: 'blur' },
                    ],
                    phone:[
                        {required:true,message:"电话不可为空",trigger:'blur'},
                        { min: 11, max: 11, message: '请正确输入电话号码', trigger: 'blur' },
                    ],
                    login_name:[
                        {required:true,message:"登录昵称不可为空",trigger:'blur'}
                    ],
                    address:[
                        {required:true,message:"地址不可为空",trigger:'blur'}
                    ],
                    password: [
                        {required:true,message:"密码不可为空",trigger:'blur'},
                        { validator: validatePass, trigger: 'blur' }
                    ],
                    passwords: [
                        {required:true,message:"第二次密码不可为空",trigger:'blur'},
                        { validator: validatePass2, trigger: 'blur' }
                    ],

                },
            }
        },
        activated() {
            this.create();
            this.getDepartment();
        },
        methods: {
            create(){
                axios.get("http://119.29.60.153:8001/doctorservice/doctor/findAll").then(resp=> {
                    this.data = resp.data.data.items;
                    this.data.reverse();
                })
            },
            getDepartment(){
                axios.get("http://119.29.60.153:8001/doctorservice/department/getSecondDepartment").then(resp=> {
                    this.secondList = resp.data.data.secondList;
                })
            },
            edit( formName){
                this.$refs[formName].validate((valid)=>{
                    if(valid){
                        axios.post("http://119.29.60.153:8001/doctorservice/doctor/updateDoctor",this.doctor).then(resp=> {

                            if(resp.data.success==true){
                                ElMessage.success("修改成功!");
                                this.dialogFormVisible=false;
                                this.create();
                            }
                            else {
                                ElMessage.error("修改失败!");
                                this.addFormVisible=false;

                            }
                        })
                    }else {
                        return false;
                    }
                })

            },
            adddoctorform( formName){
                this.$refs[formName].validate((valid)=>{
                    if(valid){
                        axios.post("http://119.29.60.153:8001/doctorservice/doctor/addDoctor",this.adddoctor).then(resp=> {

                            if(resp.data.success==true){
                                ElMessage.success('成功添加医生');
                                this.create();
                                this.addFormVisible=false;
                                this.adddoctor={
                                };
                            }
                            else {
                                ElMessage.error("添加失败!");
                                this.addFormVisible=false;

                            }
                        })
                    }else {
                        return false;
                    }
                })

            },

            OnSubmitrefresh(){
                axios.post("http://119.29.60.153:8001/doctorservice/doctor/updateDoctor",this.doctor).then(resp=> {

                    if(resp.data.success==true){
                        ElMessage.success("重置密码成功!");
                        this.refreshFormVisible=false;
                        this.create();
                    }
                    else {
                        ElMessage.error("修改失败!");
                        this.dialogFormVisible=false;

                    }
                })
            },

            Deletedoctor(){
                axios.delete("http://119.29.60.153:8001/doctorservice/doctor/"+this.doctor.id).then(resp=> {
                    if(resp.data.success==true){
                        ElMessage.success('删除成功');
                        this.deleteFormVisible = false;
                        this.create();
                    }
                    else ElMessage.error('删除失败');
                })
            },
            selectDoctor(){
                axios.post("http://119.29.60.153:8001/doctorservice/doctor/pageDoctorsCondition/1/10",this.doctorQuery).then(resp=> {
                    this.data = resp.data.data.rows;
                })
            },
            handleSizeChange: function (size) {
                this.pagesize = size;
                console.log(this.pagesize)  //每页下拉显示数据
            },
            handleCurrentChange: function(currentPage){
                this.currentPage = currentPage;
                console.log(this.currentPage)  //点击第几页
            },
            handlerefresh(index,row){
                this.doctor= row;
                this.doctor.password='123';
                this.refreshFormVisible = true;
            },
            exportdoctors(){
                window.open("http://119.29.60.153:8001/doctorservice/doctor/exportDoctorsInfo");
            },
            handleEdit(index,row){
                this.doctor= row;
                this.dialogFormVisible = true;
            },
            handledelete(index,row){
                this.doctor= row;
                this.deleteFormVisible = true;
            }
        },
    }
</script>

<style scoped>
.red{
    color: red;
}
</style>